<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-直线</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="500" style="border: 1px solid;"></canvas>
</body>
<script>

    /***
     * Q1： 通过 moveTo lineTo绘制一个正方形
     * */
     var canvas = document.getElementById('myCanvas');
     var ctx= canvas.getContext('2d');
     ctx.moveTo(100,10);  // 起点 x,y
     ctx.lineTo(190,290); // 终点
   //  ctx.lineTo(300,290);

     ctx.moveTo(300,300);
     ctx.lineTo(190,490);


     ctx.stroke();  // 绘制--轮廓；fill


    /**
     * 应用 ： 验证码混淆
     * */

</script>
</html>